<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:app="http://java.sun.com/jsf/composite/app"
                xmlns:ds="http://deltaset.org/deltaset-faces"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface/>
    <composite:implementation>
        <style type="text/css">
            .app-pref-panel li{list-style: none;padding:0;margin:0;display: inline;}
            .app-pref-panel ul{padding:0;margin:0;}
            .app-pref-panel {/*width:600px;*/}
            .app-pref-panel .ds-field{padding-right:0;}
        </style> 
        <c:set var="prefPanelDomId" value="#{cc.clientId}:preferencesPanel"/>
        <c:set var="prefPanelOpen" value="function(data){if('success'==data.status){deltaset.dialog('#{prefPanelDomId}').open();}}"/>
        <script type="text/javascript">
var _resetNow=true;
function resetStyle() {
    if(true==_resetNow){
        deltaset.theme().previewStyle('#{preferencesBean.themeName}');
    }
}

function reLoadPage(data) {
    _resetNow=false;
    //preferencesPanelClose(data);
    _resetNow=true;    
    //var flag=deltaset.dialog('preferencesPanel').keepOpen;
    var flag=deltaset.dialog('#{prefPanelDomId}').keepOrClose();
    if("success"==data.status){
        if(false==flag){
            //window.location.reload(true); //doesn't work properly in IE...'
            var url=(document.location+"").replace(/#$/, ""); //issue with reload if there is '#' in the end of the url...            //alert(url)
            window.location=url;
        }
    }
}
        </script>

        <h:form>
            <h:commandLink  value="Preferences" id="prefLink" action="#{preferencesBean.open}"  style="color:#ccc;">
                <f:ajax onevent="#{prefPanelOpen}" render=":#{cc.clientId}:preferencesPanel:preferencesForm" />
                <c:forEach items="#{param}" var="requestParam">
                    <c:if test="#{!fn:startsWith(requestParam.key, 'javax.faces') and !fn:contains(requestParam.key,'j_') and requestParam.key!='lang'}">
                        <f:param name="#{requestParam.key}" value="#{param[requestParam.key]}"/>
                    </c:if>
                </c:forEach>                
            </h:commandLink>
        </h:form>
        <ds:dialog id="preferencesPanel" title="Preferences"
                   beforeclose="resetStyle">
            <h:form id="preferencesForm">                 

                <ds:dialog-keep-open-if dialogId="preferencesPanel" test="#{true == preferencesBean.hasValidationErrors}"/>
                <h:messages  styleClass="ui-state-highlight ui-corner-all"/>

                <ds:fieldset styleClass="app-pref-panel" id="fset" width="440px">


                    <div  class="app-pref-item-group">
                        <ds:titlebar title="Avaiable Themes"/>
                        <h:inputHidden id="themeName" value="#{preferencesBean.themeName}"/>

                        <ds:themeChooser id="chooser" inputId="#{cc.clientId}:preferencesPanel:preferencesForm:fset:themeName"  supportedThemes="#{preferencesBean.supportedThemes}"/>
                    </div>


                    <ds:titlebar title="Layout"/>           

                    <h:outputLabel for="fieldsetPosition" value="Field position:" styleClass="ds-label"/>
                    <h:selectOneListbox id="fieldsetPosition" value="#{preferencesBean.fieldsetPosition}"  styleClass="ui-widget-content ui-corner-all ds-field">
                        <f:selectItems value="#{preferencesBean.supportedFieldsetPositions}"/>
                    </h:selectOneListbox>

                    <ds:inputText label="date format" value="#{preferencesBean.dateFormat}" required="true" requiredMessage="REquired !"/>  
                    
                    <h:outputLabel for="uiStyle" value="UI Style:" styleClass="ds-label"/>
                    <h:selectOneListbox id="uiStyle" value="#{preferencesBean.uiStyle}"  styleClass="ui-widget-content ui-corner-all ds-field">
                        <f:selectItems value="#{preferencesBean.supportedUiStyles}"/>
                    </h:selectOneListbox>

                </ds:fieldset>

                <div class="ds-margin-top" style="display:block;text-align: right;">
                    <h:commandButton value="#{deltasetMessages['deltaset.crud.save']}"
                                     action="#{preferencesBean.saveUserContext}"
                                     styleClass="ds-button">
                        <f:ajax execute="@form" onevent="reLoadPage" render=":#{cc.clientId}:preferencesPanel:preferencesForm"/>
                    </h:commandButton>
                </div>

            </h:form>
        </ds:dialog>
    </composite:implementation>
</ui:composition>
